<template>
  <el-table :data="tableData" :span-method="spanMethod" border style="width:  80%">
    <el-table-column prop="name" label="保单年度">
    </el-table-column>
    <el-table-column prop="proportion" label="缴费年限" width="120">
    </el-table-column>
    <el-table-column prop="ingredients" label=" 费率维度" width="120">
    </el-table-column>

    <el-table-column prop="value1" label="主险含身故(用于经纪费)" width="120">
    </el-table-column>
    <el-table-column prop="value2" label="附加投保人豁免" width="120">
    </el-table-column>
    <el-table-column prop="value1" label="主险不含身故(用于经纪费)" width="120">
    </el-table-column>


  </el-table>
</template>
<script>
const _data = {
    "次年": {
        "10年缴": {
            "终身 ": {
                "附加投保人豁免-基础服务费": "null",
                "主险含身故（用于经纪费）-基础服务费": "0",
                "主险不含身故（用于经纪费）-基础服务费": "0"
            },
            "至70岁 ": {
                "附加投保人豁免-基础服务费": "null",
                "主险含身故（用于经纪费）-基础服务费": "0",
                "主险不含身故（用于经纪费）-基础服务费": "null"
            }
        },
        "15年缴": {
            "终身 ": {
                "附加投保人豁免-基础服务费": "null",
                "主险含身故（用于经纪费）-基础服务费": "0",
                "主险不含身故（用于经纪费）-基础服务费": "0"
            },
            "至70岁 ": {
                "附加投保人豁免-基础服务费": "null",
                "主险含身故（用于经纪费）-基础服务费": "0",
                "主险不含身故（用于经纪费）-基础服务费": "null"
            }
        },
        "20年缴": {
            "终身 ": {
                "附加投保人豁免-基础服务费": "null",
                "主险含身故（用于经纪费）-基础服务费": "6",
                "主险不含身故（用于经纪费）-基础服务费": "6"
            },
            "至70岁 ": {
                "附加投保人豁免-基础服务费": "null",
                "主险含身故（用于经纪费）-基础服务费": "6",
                "主险不含身故（用于经纪费）-基础服务费": "null"
            }
        },
        "30年缴": {
            "终身 ": {
                "附加投保人豁免-基础服务费": "null",
                "主险含身故（用于经纪费）-基础服务费": "6",
                "主险不含身故（用于经纪费）-基础服务费": "6"
            },
            "至70岁 ": {
                "附加投保人豁免-基础服务费": "null",
                "主险含身故（用于经纪费）-基础服务费": "6",
                "主险不含身故（用于经纪费）-基础服务费": "null"
            }
        }
    },
    "首年": {
        "5年缴": {
            "终身 ": {
                "附加投保人豁免-基础服务费": "null",
                "主险含身故（用于经纪费）-基础服务费": "2",
                "主险不含身故（用于经纪费）-基础服务费": "2"
            },
            "至70岁 ": {
                "附加投保人豁免-基础服务费": "null",
                "主险含身故（用于经纪费）-基础服务费": "0.5",
                "主险不含身故（用于经纪费）-基础服务费": "null"
            }
        },
        "10年缴": {
            "终身 ": {
                "附加投保人豁免-基础服务费": "23",
                "主险含身故（用于经纪费）-基础服务费": "18",
                "主险不含身故（用于经纪费）-基础服务费": "18"
            },
            "至70岁 ": {
                "附加投保人豁免-基础服务费": "23",
                "主险含身故（用于经纪费）-基础服务费": "2",
                "主险不含身故（用于经纪费）-基础服务费": "null"
            }
        },
        "15年缴": {
            "终身 ": {
                "附加投保人豁免-基础服务费": "42",
                "主险含身故（用于经纪费）-基础服务费": "38",
                "主险不含身故（用于经纪费）-基础服务费": "38"
            },
            "至70岁 ": {
                "附加投保人豁免-基础服务费": "42",
                "主险含身故（用于经纪费）-基础服务费": "2",
                "主险不含身故（用于经纪费）-基础服务费": "null"
            }
        },
        "20年缴": {
            "终身 ": {
                "附加投保人豁免-基础服务费": "57",
                "主险含身故（用于经纪费）-基础服务费": "81",
                "主险不含身故（用于经纪费）-基础服务费": "71"
            },
            "至70岁 ": {
                "附加投保人豁免-基础服务费": "57",
                "主险含身故（用于经纪费）-基础服务费": "12",
                "主险不含身故（用于经纪费）-基础服务费": "null"
            }
        },
        "30年缴": {
            "终身 ": {
                "附加投保人豁免-基础服务费": "57",
                "主险含身故（用于经纪费）-基础服务费": "81",
                "主险不含身故（用于经纪费）-基础服务费": "71"
            },
            "至70岁 ": {
                "附加投保人豁免-基础服务费": "57",
                "主险含身故（用于经纪费）-基础服务费": "12",
                "主险不含身故（用于经纪费）-基础服务费": "null"
            }
        }
    }
}
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      tableData:[],
      mergeData: {},
      //合并行的记录
      mergePos: {},
      //mergeData中每项的索引
      mergeProp: ['name', 'proportion', 'ingredients'],
      mergeKeys: ['nameId', 'proportionId', 'ingredientsId'],
    }
  },
  created(){
    Object.keys(_data).map((key,a_index) => {
      let _item = _data[key];
      Object.keys(_item).map((_k,b_index) => {
        let _citem = _item[_k]
        Object.keys(_citem).map((_d,c_index) => {
          let _ditem = _citem[_d]
          var data = {
              nameId:a_index + 1,
              proportionId:b_index + 1,
              ingredientsId:c_index + 1,
              name:key,
              proportion:_k,
              ingredients:_d
            }

          Object.keys(_ditem).map((_i,index) => {
            data['value'+(index + 1)] = _ditem[_i] == 'null' ? '' : _ditem[_i]
          })
          this.tableData.push(data)
        })
      })
    })
    this.getSpanArr(this.tableData, this.mergeKeys)
  },
  methods:{
    getSpanArr(tableData, keyName) {
      console.log(tableData,keyName,333);
      keyName.forEach((kitem, k) =>{
        console.log(k,3);
        tableData.forEach((data, i) =>{
          if (i === 0) {
            this.mergeData[kitem] = this.mergeData[kitem] || []
            this.mergeData[kitem].push(1) 
            this.mergePos[kitem] = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[kitem] === tableData[i - 1][kitem]) {
              this.mergeData[kitem][this.mergePos[kitem]] += 1
              this.mergeData[kitem].push(0)
            } else {
              this.mergeData[kitem].push(1) 
              this.mergePos[kitem] = i
            }
          }
        })
      }) 
      console.log(this.mergeData,2) 
      console.log(this.mergePos,1)
    },
    spanMethod({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      console.log(row,column,columnIndex);
      if (this.mergeProp.includes(column.property)) {
        console.log(column.property,333);
        const _row = this.mergeData[column.property + 'Id'][rowIndex] 
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
    //第一个代表rowspan 行，第二个代表colspan 列
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  position: relative;
  font-family: "SF Pro Display",Roboto,Noto,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size: 14px;
  line-height: 1.57142857;
  background-color: #f5f6f7;
  color: #333;
  min-height: 100%;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
}
a {
  color: #42b983;
}

* {
  padding: 0;
  margin: 0;
  margin-block-end: 0;
  margin-block-start: 0;
}

table {
  margin: 100px auto;
  border-collapse: collapse;
  width: 1000px;
  border: 1px solid #ddd;
  ;
}

.td {
  width: 230px;
  padding: 10px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.dl,
.dd {
  display: flex;
  line-height: 30px;
}

.dd .td:last-child{
  border-right:none;
}
.list:last-child .dl:last-child .td{
  border-bottom:none;
}
</style>
